<template>
	<view class="" style="height: 100%;">
	<!-- 	<view class="" @click="SX">
			筛选
		</view> -->
		<mescroll-uni :fixed="false" @init="mescrollInit" :height="height" :down="downOption" @down="downCallback"
			:up="upOption" @up="upCallback" @emptyclick="emptyClick">
			<view class="mescroll-item" v-for="(item,index) in goods">
				<view class="mescroll-item-snbox">
					<view class="snbox-left">
						<text>SN：{{item.sn}}</text>
						<image src="/static/img/index/ic_copy.png" mode="widthFix" @click="oncopy(item.sn)"></image>
					</view>
					<view class="snbox-right">
						<view class="yibang" v-if="item.bdState == '1'">
							已绑定
						</view>
						<view class="weibang" v-else>
							未绑定
						</view>
						<view class="snbox-right-line">

						</view>
						<view class="yibang" v-if="item.jhState == '1'">
							已激活
						</view>
						<view class="weibang" v-else>
							未激活
						</view>
					</view>
				</view>
				<view class="mescroll-item-flex mer">
					<view class="">
						商户：{{item.merchant}}
					</view>
					<view class="">

					</view>
				</view>
				<view class="mescroll-item-flex mer">
					<view class="">
						代理：{{item.userName}}
					</view>
					<view class="">
				
					</view>
				</view>
				<view class="mescroll-item-flex mer">
					<view class="">
						产品：{{item.type}}
					</view>
					<view class="">

					</view>
				</view>
				<view class="mescroll-item-flex mer">
					<view class="">
						交易量：{{item.tradeAmt}}
					</view>
					<view class="">
						服务费：{{item.fee}}
					</view>
				</view>
				<view class="mescroll-item-flex timer">
					<view class="">
						划拨时间：{{item.createDate}}
					</view>
					<view class="">
						
					</view>
				</view>
			</view>
		</mescroll-uni>
		<u-popup v-model="show" mode="center" border-radius="14" width="90%">
			<view class="popup-box">
				<view class="popup-box-title">
					筛选条件
				</view>
				<view class="popup-box-line">

				</view>
				<view class="popup-box-title martop">
					SN：
				</view>
				<view class="popup-box-input">
					<input type="text" v-model="sn" placeholder="请输入SN号"   />
					<image class="clearimg" src="/static/img/index/ic_clear.png" style="width:28rpx;height:28rpx;"
						@click="clearinput('sn')" v-if="sn !=''"></image>
				</view>
				<view class="popup-box-title martop">
					代理：
				</view>
				<view class="popup-box-input">
					<input type="text" v-model="keyword" placeholder="请输入代理名"  />
					<image class="clearimg"  src="/static/img/index/ic_clear.png" style="width:28rpx;height:28rpx;"
						@click="clearinput('keyword')" v-if="keyword !=''"></image>
				</view>
				<view class="popup-box-title martop">
					商户名：
				</view>
				<view class="popup-box-input">
					<input type="text" v-model="merchant" placeholder="请输入商户名"  />
					<image class="clearimg"  src="/static/img/index/ic_clear.png" style="width:28rpx;height:28rpx;"
						@click="clearinput('merchant')" v-if="merchant !=''"></image>
				</view>
				<view class="popup-box-title martop">
					产品：
				</view>
				<view class="radioList-box">
					<!-- @change="radioChange" -->
					<radio-group class="radioList">
						<label class="radioList-item" v-for="(item, index) in productlist" :key="index" >
							<view @click="radioClick(item,index)">
								<radio :value="item.value" :checked="index === current"
									 />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>

				<view class="popup-box-title martop">
					状态：
				</view>
				<view class="radioList-box">
					<!-- @change="radioChange" -->
					<radio-group class="radioList">
						<label class="radioList-item" v-for="(item, index) in activeStatuslist" :key="index"  >
							<view @click="activeradioClick(item,index)">
								<radio :value="item.value" :checked="index === activecurrent"
									/>
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<view class="popup-box-title martop">
					服务费：
				</view>
				<view class="radioList-box">
					<!-- @change="radioChange" -->
					<radio-group class="radioList">
						<label class="radioList-item" v-for="(item, index) in feelist" :key="index" >
							<view @click="freeClick(item,index)">
								<radio :value="item.value" :checked="index === freecurrent"
									 />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>


				<view class="queryBut-box">
					<button class="queryBut" @click="commit">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	const api = require('../../config/api');
	const util = require('../../utils/util');
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				downOption: {
					auto: true //  false 不自动加载 (mixin已处理第一个tab触发downCallback)  true
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4,
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '暂无更多', // 没有更多数据的提示文本
					empty: {
						tip: '暂无相关数据', // 提示
					},
				},
				goods: [],
				productlist: [],
				feelist: [],
				sn: '',
				merchant: '',
				acqType: '',
				jhState: '',
				bdState: '',
				keyword:'',
				fee: '',
				current: null,
				activecurrent: null,
				freecurrent: null,
				activeStatuslist: [{
						name: '未绑定',
						value: '0',
						type: 'bd'
					},
					{
						name: '已绑定',
						value: '1',
						type: 'bd'
					},
					{
						name: '未激活',
						value: '0',
						type: 'jh'
					},
					{
						name: '已激活',
						value: '1',
						type: 'jh'
					}
				],
						show: false,
			}
		},
		onShow() {
		this.getproductlist();
		this.getfeelist();
		},
		//#ifdef APP-PLUS
		onNavigationBarButtonTap: function(e) {
			// console.log(e);
			this.SX()
		},
		//#endif
		methods: {
			clearinput(str){
				if (str == 'sn') {
					this.sn = ""
				} else if (str == 'merchant') {
					this.merchant = ""
				}else if (str == 'keyword') {
					this.keyword = ""
					
				}
			},
			oncopy(e){
				uni.setClipboardData({
					data: e,
					success: function () {
						uni.showToast({
							title:'已复制到剪贴板',
							icon:'none'
						});
					}
				});
			},
			commit() {
				this.show = false
				this.mescroll.resetUpScroll()
			},
			SX() {
				this.show = true
			},
			radioClick(item,e) {
				
				if (e == this.current) {
					this.current = null
					this.acqType = ''
				} else {
					this.current = e
					this.acqType = item.id
				}
			},
			activeradioClick(item, e) {
						
				if (e == this.activecurrent) {
					this.activecurrent = null
					this.jhState = ''
						this.bdState = ''
				} else {
					this.activecurrent = e
					if (item.type == 'bd') {
						this.bdState = item.value
						this.jhState = ''
					} else {
						this.jhState = item.value
						this.bdState = ''
					}

				}
			},
			freeClick(item,e) {
					
				if (e == this.freecurrent) {
					this.freecurrent = null
					this.fee = ''
				} else {
					this.freecurrent = e
					this.fee = item.fee
				}
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				// this.mescroll.endErr();
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				const res = util.request(
					api.huaborecordUrl, {
						page: pageNum,
						limit: pageSize,
						sn: this.sn,
						keyword: this.keyword,
						merchant: this.merchant,
						acqType: this.acqType,
						jhState: this.jhState,
						bdState: this.bdState,
						fee: this.fee,
					},
					'GET'
				).then(res => {
					console.log(res);
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					// let totalPage = res.data.pages;
					// this.mescroll.endByPage(res.data.length, totalPage); //必传参数(当前页的数据个数, 总页数)
					let totalSize = res.data.total;
					this.mescroll.endBySize(res.data.rows.length, totalSize);
					//设置列表数据
					if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
					this.goods = this.goods.concat(res.data.rows); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//点击空布局按钮的回调
			emptyClick() {
				uni.showToast({
					title: '点击了按钮,具体逻辑自行实现'
				})
			},
			async getproductlist() {
				const res = await util.request(
					api.productlistUrl, {},
					'GET'
				);
				console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})

				} else {
					this.productlist = res.data
				}
			},
			async getfeelist() {
				const res = await util.request(
					api.feelistUrl, {},
					'GET'
				);
				console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})

				} else {
					this.feelist = res.data
				}
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #F5F1F0;
	}

	.mescroll-upwarp {
		min-height: 0rpx !important;
	}
</style>
<style lang="scss" scoped>
	.mescroll-item {
		background-color: #fff;
		// width: 100%;
		margin: 5px 15px;
		padding: 10px;
		font-size: 14px;
		border-radius: 5px;
		border-bottom: 1px solid #E6E6E6;
	}

	.mescroll-item-snbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.snbox-left {
		font-size: 12px;
		color: #000;
		display: flex;
		align-items: center;

		image {
			width: 30px;
			margin-left: 8px;
		}
	}

	.snbox-right {
		display: flex;
		align-items: center;

		.yibang {
			font-size: 14px;
			color: #92B8FC;
		}

		.weibang {
			font-size: 14px;
			color: #898989;
		}
	}

	.snbox-right-line {
		width: 2px;
		height: 12px;
		margin-left: 3px;
		margin-right: 3px;
		background-color: #92B8FC;
	}

	.mescroll-item-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.mer {
		margin-top: 6px;
		font-size: 14px;
		color: #000;
	}
	.popup-box {
		padding: 15px;
	
	}
	
	.popup-box-title {
		font-size: 15px;
		font-weight: 600;
		color: #000;
	}
	
	.popup-box-line {
		background-color: #E5E5E5;
		height: 1px;
		width: 100%;
		margin-top: 10px;
	}
	
	.martop {
		margin-top: 10px;
	}
	
	.popup-box-input {
		height: 32px;
		margin-top: 6px;
			position: relative;
		input {
		
			border: 1px solid #E5E5E5;
			border-radius: 5px;
			padding: 5px;
			padding-right: 30px;
		}
		.clearimg{
			position: absolute;
			right: 10px;
			top: 50%;
				transform: translateY(-50%);
			
		}
	}
	.queryBut-box {
		margin-top: 10px;
	}
	
	.queryBut {
		margin: 0 auto;
		width: 100rpx;
		height: 62rpx;
		background-color: #6A9FFB;
		font-size: 25rpx;
		padding: 0rpx;
		color: #fff;
		line-height: 62rpx;
		// margin-left: 25rpx;
	}
	.radioList{
		
		display: flex;
		align-content: center;
		// justify-content: space-between;
		flex-wrap: wrap;
		
	}
	.radioList-item{
	width: 49%;
		display: flex;
		align-content: center;
		justify-content: center;
	}
	.radioList-box{
		padding: 10px 5px;
	}
	.timer{
		margin-top: 6px;
		font-size: 12px;
		color: #A0A0A0;
	}
</style>